<template>
  <div class="box">
    <div class="table-oper">
      <el-form :inline="true" :model="adminList" class="oper-right">

      </el-form>
    </div>

    <el-table :data="adminList.data" border style="width: 100%">
      <el-table-column fixed prop="id" label="编号" width="80" />
      <el-table-column prop="name" label="姓名"  />
      <el-table-column prop="role" label="角色"  />
      <el-table-column prop="email" label="邮箱"  />
      <el-table-column prop="avatar" label="头像"  >
        <template #default="{row}">
          <img v-if="row.avatar" :src="row.avatar" alt="头像" style="width: 50px; height: 50px; border-radius: 50%" />
        </template>
      </el-table-column>
    </el-table>

  </div>

</template>

<script setup>
import { ElMessageBox,ElMessage } from 'element-plus'
import {ref,reactive,getCurrentInstance,onMounted} from 'vue'
import axios from "axios";
const {proxy}=getCurrentInstance();//proxy就代表Vue对象
import userApi from '../api/public/public.js'
import Cookies from "js-cookie";
let token = Cookies.get('token')
let adminList=reactive({
  id: "",
  name: "",
  email: "",
  avatar:"",
  role:""
});

onMounted(()=>{
  userApi.getAdminInfo(token).then(reponse=>{
    console.log(reponse)
    adminList.data=[reponse.data.data];
  });
});

</script>

<style scoped>
.box{
  margin-top:30px;
}
.pagination{
  margin-top:15px;
}
.oper-left{
  float:left;
}
.oper-right{
  float: right;
}
</style>